<template>
  <div class="header">
    <div class="l-content">
      <el-button type="primary" icon="el-icon-menu" size="mini" @click="collapseMenu"></el-button>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="current.path" v-if="current" class="el-breadcrumb-item">{{current.label}}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="r-content">
      <el-dropdown trigger="click" size="mini">
        <span class="el-dropdown-link">
          <img :src="userImg" class="userImg" />
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click.native="logOut">退出</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>
<script>
  import { mapState } from 'vuex'

  export default {
    data() {
      return {
        userImg: require('@/assets/images/user.png')     //此处为什么需要用require方法，为什么不能直接用字符串呢
      }
    },
    computed: {
      ...mapState({
        current: state => state.tab.currentMenu,
      })
    },
    methods: {
      collapseMenu() {
        this.$store.commit('collapseMenu')
      },
      logOut() {
        this.$store.commit('clearToken')
        this.$store.commit('clearMenu')
        location.reload()
      }
    },
  }
</script>
<style lang="scss" scoped>
  .header {
    display: flex;
    height: 100%;
    align-items: center;
    justify-content: space-between;
  }

  .userImg {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }

  .l-content {
    display: flex;
    align-items: center;
  }

  .el-button {
    margin-right: 20px;
  }
</style>
<!-- 修改组件已有样式不能写 scoped   所以这里新建了一个样式 -->
<style>
  .el-breadcrumb__inner a,
  .el-breadcrumb__inner.is-link {
    color: #f4f4f4;
    font-weight: normal;
  }

  .el-breadcrumb__item:last-child .el-breadcrumb__inner {
    color: #f4f4f4;
  }
</style>